<!-- 图库 -->
<template>
  <div class="photo-store">
    <div class="photo-store-head" v-if="props.isRealtime">
      <ClassifyList
        :list="tabsList"
        :echoActive="echoActive"
        @click="tabChange"
      />
    </div>
    <van-list
      v-model:loading="loading"
      finished-text="没有更多了"
      :finished="finished"
      :immediate-check="true"
      @load="onLoad"
    >
      <div class="photo-list">
        <div class="photo-list-left">
          <template v-for="item in goodsListLeft" :key="item.id">
            <PhotoItem
              isHeadle
              :itemData="item"
              @clickCollect="headleCollect"
            />
          </template>
        </div>
        <div class="photo-list-right">
          <template v-for="item in goodsListRight" :key="item.id">
            <PhotoItem
              isHeadle
              :itemData="item"
              @clickCollect="headleCollect"
            />
          </template>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import icon_hand3 from "@/assets/image/icon_hand3.png";
import ClassifyList from "@/components/classifyList/index.vue";
import PhotoItem from "./photoItem.vue";

const route = useRoute();

const props = defineProps({
  isRealtime: {
    type: Boolean,
    default: false,
  },
});

const state = reactive({
  icon_hand3,
  goodsList: [],
  tabsList: [],
  page: 1,
  size: 8,
  total: 0,
});

const { goodsList, tabsList } = toRefs(state);

const goodsListLeft = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 0)
);
const goodsListRight = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 1)
);

const router = useRouter();

import { GetDictList } from "@/api/common";

import {
  GetPhotoList, // 获取相册分页
} from "@/api/index";

let echoActive = ref();
const GetDictListData = async () => {
  let { data } = await GetDictList();
  state.tabsList = data;
  let homeItem = localStorage.getItem("homeItem");
  // 显示实时图库
  if (homeItem == 3) {
    echoActive.value = "";
  } else {
    echoActive.value = data[0].value;
  }
  GetPhotoListData();
};

let loading = ref(false);
let finished = ref(false);

const GetPhotoListData = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
    category: echoActive.value,
  };
  loading.value = true;
  let { data } = await GetPhotoList(params);
  state.total = data.pagination.total;
  state.goodsList = state.goodsList.concat(data.list);
  loading.value = false;
  if (state.goodsList.length == data.pagination.total) {
    finished.value = true;
  }
};

const onLoad = () => {
  console.log(state.total, state.goodsList.length, "state.total");
  if (state.goodsList.length < state.total && state.total != 0) {
    state.page++;
    GetPhotoListData();
  }
};

// 收藏
const headleCollect = (item) => {
  let index = state.goodsList.findIndex((o) => o.id == item.id);
  state.goodsList[index].isCollect = !state.goodsList[index].isCollect;
};

const tabChange = (ev) => {
  echoActive.value = ev;
  state.page = 1;
  state.goodsList = [];
  loading.value = false;
  finished.value = false;
  GetPhotoListData();
};

const realTimePage = () => {
  state.page = 1;
  if (!props.isRealtime) {
    echoActive.value = state.tabsList[0].value;
  } else {
    echoActive.value = "";
  }
  state.goodsList = [];
  loading.value = false;
  finished.value = false;
  GetPhotoListData();
};

onMounted(() => {
  GetDictListData();
});

defineExpose({
  realTimePage,
});
</script>



<style lang="scss" scoped>
.photo-store-head {
  padding: 10px 10px 0 10px;
}

.photo-list {
  display: flex;

  .photo-list-left,
  .photo-list-right {
    width: calc(50% - 5px);
  }
}

.photo-item {
  margin: 10px 0 0 10px;
  background: #fff;
  border-radius: 18px;

  .van-image {
    width: 100%;
    height: 180px;
  }
}

.photo-item-img {
  position: relative;
  .van-image {
    width: 100%;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    display: block;
  }
  .view-box {
    position: absolute;
    top: 10px;
    left: 50%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 15px;
    border-radius: 20px;
    transform: translateX(-50%);
    color: #fff;
    span {
      display: block;
      line-height: 20px;
    }
    img {
      width: 18px;
      margin-right: 5px;
    }
  }
}

.photo-item-content {
  padding: 5px;
}

.photo-item-content-left {
  display: flex;
  align-items: center;
  span {
    color: #999;
    font-size: 14px;
  }
  .van-image {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    overflow: hidden;
    flex: none;
    margin-right: 5px;
  }
}

.activity-item-main {
  .van-image {
    width: 100%;
    height: 100%;
  }
}
</style>
